<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title" :share="false"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<view class="xian-gray16"></view>
		<view class="question-body">
			<textarea class="question-textarea" maxlength='-1' placeholder="请输入问题的原因" @blur="bindTextAreaBlur" auto-height />
			<view class="images">
				<view class="image" @click="showimg()" v-for="(item, index) in images" :key="index">
					<cover-image class="img" :src="item"></cover-image>
					<cover-image class="img-delete" @click.stop="pause(index)" src="../../../static/images/delete.png"></cover-image>
				</view>
				<view class="image">
					<view class="img addimg" @click="addimage"><view class="img-text">添加照片</view></view>
				</view>
			</view>
		</view>
		<view class="details-bottom1">
			<view class="but-error" @click="submit()">提交反馈</view>
		</view>
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import gUpload from "@/pageageA/components/g-upload/gUpload.vue"
import { mapState, mapMutations } from 'vuex';
	
	var _this
	export default {
		computed: mapState(['hasLogin', 'uerInfo', 'baseUrl']),
		components: {
			PublicHeader,
			gUpload
		},
		data() {
			return {
				images: [],
				value: '',
				title: '问题反馈',
				control: true,
				columnNum:4
			}
		},
		mounted() {
			_this = this
			if (this.uerInfo.userId == '') {
				uni.navigateTo({
					url:"/pages/register/login"
				})
			}
		},
		methods: {
			showimg() {
				uni.previewImage({
					urls: _this.images,
					// longPressActions: {
					// 	itemList: ['发送给朋友', '保存图片'],
					// 	// itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				});
			},
			pause(val) {
				console.log(val,"删除图片")
				_this.images.splice(val, 1)
			},
			submit() {
				let _this = this
				let images = ''
				uni.showModal({
				    title: '',
				    content: '确定要反馈该问题吗？',
					cancelColor: '#57BFFF',
					confirmColor: '#57BFFF',
				    success: function (res) {
				        if (res.confirm) {
							if (_this.value + '' === '') {
								uni.showToast({
									icon: 'none',
									title: '请输入问题的原因',
									duration: 1500
								});
								return
							}
							// if (_this.images.length) {
							// 	images = _this.images[0]
							// }
							_this.$http.post('/problem/feedback/all',{
								enterpriseId:'',
								userId: _this.uerInfo.userId,
								employeeId:'',
								picture:images,
								description:_this.value
							}).
							then(function (response) {
								if (response.success) {
									uni.showToast({
										icon: 'none',
										title: '反馈成功',
										duration: 1500
									})
									setTimeout(function() {
										_this.$Router.back();
									}, 1500)
									
								}
							}).catch(function (error) {
								console.log(error);
							});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			bindTextAreaBlur (e) {
				console.log(e.detail.value)
				_this.value = e.detail.value
			},
			addimage() {
				console.log(this.images.length)
				var _this = this
				if (this.images.length > 0) {
					uni.showToast({
						icon: 'none',
						title: '只能上传一张照片',
						duration: 1500
					});
					return
				}
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: function (val) {
						console.log(val)
						let type = val.tempFiles[0].type
						if (type!='小程序无法获取选择的图片的类型') {
							uni.uploadFile({
								 // 需要上传的地址
								url:_this.baseUrl+'/user/appraise/uploadimg?uploadFile='+val.tempFilePaths[0],
								// filePath  需要上传的文件
								filePath: val.tempFilePaths[0],
								name: 'uploadFile',
								success(res1) {
									// 显示上传信息
									console.log(res1)
									let form = JSON.parse(res1.data)
									if (form.success) {
										_this.images.push(form.msg)
									}
									console.log(_this.images)
								}
							});
						} else {
							uni.showToast({
								title: '不支持该类型文件',
								icon:"none"
							})
						}
				    }
				});
			},
			//上传
			uploadImg() {
				this.$refs.gUpload.uploadImg()
			},
			//接收上传后返回的值
			chooseFile(list, v) {
				console.log(list, v)
			},
			//控件内外部切换
			switch1Change(e){
				this.control=!this.control
			},
			//列数量切换
			switch2Change(e){
				this.columnNum=this.columnNum==3?'4':'3'
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	background-color: #F9FAFB;
}
.question-body {
	width: 100%;
	min-height: 342rpx;
	background-color: #FFFFFF;
	padding-bottom: 30rpx;
}
.question-textarea {
	padding-top: 30rpx;
	min-height: 140rpx;
	width: 91.4%;
	margin-left: 4.3%;
}
.images {
	width: 96%;
}
.image {
	float: left;
	width: 150rpx;
	height: 150rpx;
	margin-top: 20rpx;
	margin-left: 30rpx;
	border-radius: 10rpx;
}
.img {
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
	text-align: center;
}
.addimg {
	background-image: url('../../../static/images/upload_image.png');
	background-size:100% 100%; 
}
.img-text {
	font-size:24rpx;
	font-family:MicrosoftYaHei;
	color:rgba(153,153,153,1);
	letter-spacing:1rpx;
	padding-top: 96rpx;
}
.img-delete {
	width: 30%;
	height: 30%;
	border-radius: 10rpx;
	position: relative;
	left: 70%;
	bottom: 100%;
	
}
.details-bottom1 {
	width: 100%;
	margin-top: 100rpx;
	margin-bottom: 22rpx;
	position: absolute;
	bottom: 0;
}
.but-error {
	width: 91.4%;
	margin-left: 4.3%;
	height: 100rpx;
	background:rgba(255,121,113,1);
	box-shadow:0px 6px 20px 0px rgba(255,121,113,0.5);
	border-radius:10rpx;
	font-size:36rpx;
	font-family:PingFangSC-Medium,PingFang SC;
	font-weight:500;
	color:rgba(255,255,255,1);
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
